<template>
  <div class="news-detail-content content-view">
    <a-affix :offset-top="105">
      <div class="content-nav">
        <nav>
          <a
            class="nav1"
            v-for="(item, index) in navList"
            :key="index"
            @click="jump(index)"
            :class="index==current?'current':''"
          >{{item}}</a>
        </nav>
      </div>
    </a-affix>
    <div class="detail-content">
      <div class="section news-text">
        <h3>黑暴”一日不除，香港一日分析报告</h3>
        <div class="news-message">
          <span class="source">来源:新华网</span>
          <span>2020-05-06 12:33:05</span>
        </div>
        <div class="news-detail-word">
          <p>有记者问，在修例风波和新冠肺炎疫情等多重打击下，香港经济近十年来首次陷入衰退，失业率高企，民生多艰。面对当前困境，5月5日，香港各界有识之士成立“香港再出发大联盟”，希望团结各界凝聚共识，收拾乱局，推动香港重回正轨。但黑衣暴徒在疫情刚趋缓之际，就迫不及待走上街头，实施非法聚集、滋扰商铺、投掷汽油弹等暴力活动。请问发言人对此有何看法？香港如何走出困境？</p>
          <p>发言人回答说，毋庸讳言，香港确实已陷入困境。我们注意到香港特区政府日前表示，香港经济已陷入深度衰退，一季度本地生产总值同比大幅下跌8.9%，比1998年亚洲金融风暴和2008年国际金融危机时表现更差，成为1974年第一季度有记录以来最大的单季跌幅。特区政府还表示，目前4.2%的失业率创下9年来的新高，预计今年经济实质增长-7%，全年财政赤字将大幅攀升到2800亿港元或以上，民生日显艰难。</p>
        </div>
      </div>
      <div class="section text-analysis">
        <detailTitle titleText="智能文本分析"></detailTitle>
        <div class="recognition-content">
          <a-card :bordered="false" class="card-content">
            <h3 class="card-title">
              <span>实体识别</span>
            </h3>
            <div class="card-table">
              <a-table :columns="columns" :data-source="recognitionData" :pagination="false">
                <template slot-scope="text,record" slot="address">
                  <div
                    class="td-detail"
                    v-if="record.isShowMore === false"
                  >{{ record.address|ellipsis}}</div>
                  <div class="td-detail" v-else>{{ record.address}}</div>
                  <div class="more-btrn" v-if="record.address.length > 34">
                    <div v-if="record.isShowMore === false" @click="detailMoreBtn(record)">
                      <span>查看更多</span>
                      <a-icon type="down" />
                    </div>
                    <div v-else @click="detailMoreBtn(record)">
                      <span>收起</span>
                      <a-icon type="up" />
                    </div>
                  </div>
                </template>
                <template slot-scope="text,record" slot="name">
                  <div v-if="record.isNameShowMore === false">{{ record.name|ellipsis}}</div>
                  <div v-else>{{ record.name}}</div>
                  <div class="more-btrn" v-if="record.name.length > 34">
                    <div
                      v-if="record.isNameShowMore === false"
                      @click="detailMoreBtn(record,'name')"
                    >
                      <span>查看更多</span>
                      <a-icon type="down" />
                    </div>
                    <div v-else @click="detailMoreBtn(record,'name')">
                      <span>收起</span>
                      <a-icon type="up" />
                    </div>
                  </div>
                </template>
              </a-table>
            </div>
          </a-card>
          <a-card :bordered="false" class="card-content">
            <h3 class="card-title">
              <span>摘要提取</span>
            </h3>
            <div class="abstract-content">
              <p>香港经济的严重状况是多重因素造成的。当前，新冠肺炎疫情全球蔓延，在给世界人民生命安全造成严重威胁的同时，也给全球经济增长带来空前困难和挑战。作为高度开放的小型经济体，香港不可避免地受到国际经济走势和外围环境的影响。然而，香港的最大祸患来自于其内部，就是公然叫嚣和实施“揽炒”的黑暴势力。这股势力居心最毒、破坏最大、为祸最烈。自去年6月以来，他们公然挑战“一国两制”原则底线，践踏法治，破坏社会秩序，打砸烧抢公私财物，危害民众生命安全，严重损害香港营商环境和国际形象。他们的恶行不仅导致游客却步，百业凋零，经济损失达上千亿，而且严重打击了投资者对香港的信心，颠覆了人们对香港的美好印象，令香港的声誉一落千丈。可以说，黑暴势力正在摧毁香港繁荣稳定的根基。</p>
            </div>
          </a-card>
          <a-card :bordered="false" class="card-content">
            <h3 class="card-title">
              <span>关键词云</span>
            </h3>
            <div class="erchart-word">
              <wordcloud id="echarts05" :data="echarts05Data" height="190px" />
            </div>
          </a-card>
        </div>
      </div>
      <div class="section polymerization-map">
        <detailTitle titleText="聚合图谱"></detailTitle>
        <div class="polymerization-message">
          聚合时间范围:
          <span>2020-04-03 12:50 ~ 2020-05-01 16:34</span>
          本体:
          <span>外交部门户</span>
          聚合度:
          <span>33</span>
        </div>
        <div class="erchart-content">
          <a-card :bordered="false" class="card-content">
            <h3 class="card-title">
              <span>传播动作分析</span>
            </h3>
            <div class="action-content">
              <a-row :gutter="16">
                <a-col :span="8">
                  <div class="action-title">
                    <span>
                      <i>阅读数</i>
                      <big>1.2W</big>
                    </span>
                    <circuitEcharts id="echarts06" :data="echarts06Data"></circuitEcharts>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="action-title">
                    <span>
                      <i>评价数</i>
                      <big>1.2W</big>
                    </span>
                    <circuitEcharts title="评论数占比分析" id="echarts07" :data="echarts06Data"></circuitEcharts>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="action-title">
                    <span>
                      <i>点赞数</i>
                      <big>1.2W</big>
                    </span>
                    <circuitEcharts title="点赞数占比分析" id="echarts08" :data="echarts06Data"></circuitEcharts>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-card>
          <a-card :bordered="false" class="card-content">
            <h3 class="card-title">
              <span>新闻聚合分析</span>
            </h3>
            <div class="news-analysis-content">
              <newsAnalysis id="echart1"></newsAnalysis>
            </div>
          </a-card>
        </div>
      </div>
      <div class="section emotional-analysis">
        <detailTitle titleText="情感分析"></detailTitle>
        <a-card :bordered="false" class="card-content">
          <h3 class="card-title">
            <span>网络情绪趋势</span>
          </h3>
          <div class="emotional-content">
            <emotionEcharts id="echarts09" :data="echarts04Data"></emotionEcharts>
          </div>
        </a-card>
        <a-card :bordered="false" class="card-content">
          <h3 class="card-title">
            <span>精选评论</span>
            <i>(18条结果)</i>
          </h3>
          <div class="emotional-table card-table">
            <a-table :columns="emotionalColumns" :data-source="emotionalData" :pagination="false">
              <template slot-scope="text,record" slot="evaluation">
                <div
                  class="td-detail"
                  v-if="record.isShowMore === false"
                >{{ record.evaluation|ellipsis}}</div>
                <div class="td-detail" v-else>{{ record.evaluation}}</div>
                <div class="more-btrn" v-if="record.evaluation.length > 34">
                  <div v-if="record.isShowMore === false" @click="detailMoreBtn(record)">
                    <span>查看更多</span>
                    <a-icon type="down" />
                  </div>
                  <div v-else @click="detailMoreBtn(record)">
                    <span>收起</span>
                    <a-icon type="up" />
                  </div>
                </div>
              </template>
            </a-table>
          </div>
        </a-card>
      </div>
    </div>
     <backTop />
  </div>
</template>

<script>
import detailTitle from "components/base/detailTitle";
import wordcloud from "components/configuration/newsDetail/wordcloud";
import circuitEcharts from "components/configuration/newsDetail/circuitEcharts";
import emotionEcharts from "components/configuration/newsDetail/emotionEcharts";
import newsAnalysis from "components/configuration/newsDetail/newsAnalysis";
import backTop from "components/base/backTop";
export default {
  components: {
    detailTitle,
    wordcloud,
    circuitEcharts,
    emotionEcharts,
    newsAnalysis,
    backTop
  },
  data() {
    return {
      isShowMore: false,
      scroll: "",
      echarts04Data: [
        { id: 1, name: "正向", data: [820, 932, 901, 934, 1290, 1330, 1320] },
        { id: 1, name: "中立", data: [123, 345, 678, 111, 2367, 1234, 890] },
        { id: 1, name: "负向", data: [11, 234, 123, 765, 111, 345, 104] },
      ],
      echarts05Data: [
        {
          name: "十九大精神",
          value: 15000,
        },
        {
          name: "两学一做",
          value: 10081,
        },
        {
          name: "中华民族",
          value: 9386,
        },
        {
          name: "马克思主义",
          value: 7500,
        },
        {
          name: "民族复兴",
          value: 7500,
        },
        {
          name: "社会主义制度",
          value: 6500,
        },
        {
          name: "国防白皮书",
          value: 6500,
        },
        {
          name: "创新",
          value: 6000,
        },
        {
          name: "民主革命",
          value: 4500,
        },
        {
          name: "文化强国",
          value: 3800,
        },
        {
          name: "国家主权",
          value: 3000,
        },
        {
          name: "武装颠覆",
          value: 2500,
        },
        {
          name: "领土完整",
          value: 2300,
        },
        {
          name: "安全",
          value: 2000,
        },
        {
          name: "从严治党",
          value: 1900,
        },
        {
          name: "现代化经济体系",
          value: 1800,
        },
        {
          name: "国防动员",
          value: 1700,
        },
        {
          name: "信息化战争",
          value: 1600,
        },
        {
          name: "局部战争",
          value: 1500,
        },
        {
          name: "教育",
          value: 1200,
        },
        {
          name: "职业教育",
          value: 1100,
        },
        {
          name: "兵法",
          value: 900,
        },
        {
          name: "一国两制",
          value: 800,
        },
        {
          name: "特色社会主义思想",
          value: 700,
        },
      ],
      echarts06Data: [
        {
          value: 2,
          name: "腾讯网",
        },
        {
          value: 8,
          name: "搜狐网",
        },
        {
          value: 9,
          name: "微博",
        },
        {
          value: 12,
          name: "微信",
        },
      ],
      list: [
        {
          name: "第一条",
          backgroundcolor: "#FFF",
        },
        {
          name: "第二条",
          backgroundcolor: "#A593B2",
        },
        {
          name: "第三条",
          backgroundcolor: "#A7B293",
        },
        {
          name: "第四条",
          backgroundcolor: "#0F2798",
        },
      ],
      navList: ["正文内容", "智能文本分析", "聚合图谱", "情感分析"],
      current: 0,
      recognitionData: [
        {
          key: "1",
          name: "John BrownJohn BrownJohn BrownJohn Brown",
          type: "政策",
          address:
            "测试字数测试字数测试字数测试字数测试字数测试字数测试字数测试字数测试字数测试字数测试字数测试字数测试字数测试字数",
          isShowMore: false,
          isNameShowMore: false,
        },
      ],
      columns: [
        {
          title: "类别",
          dataIndex: "type",
          key: "type",
          align: "center",
        },
        {
          title: "政策名",
          dataIndex: "address",
          key: "address 1",
          width: "60%",
          align: "center",
          scopedSlots: { customRender: "address" },
        },
        {
          title: "人名",
          dataIndex: "name",
          key: "name",
          width: "30%",
          align: "center",
          scopedSlots: { customRender: "name" },
        },
      ],
      emotionalData: [
        {
          key: "1",
          evaluation:
            "黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜",
          time: "2020-08-21",
          source: "新华网",
          emotional: "正向",
          isShowMore: false,
        },
        {
          key: "2",
          evaluation:
            "黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜黑暴势力及其幕后指挥者、组织者、煽动者的目的和用心，已经昭然若揭，就是想.把香港拖下悬崖，不惜",
          time: "2020-08-21",
          source: "新华网",
          emotional: "负向",
          isShowMore: false,
        },
      ],
      emotionalColumns: [
        {
          title: "评价",
          dataIndex: "evaluation",
          key: "evaluation",
          align: "center",
          width: "60%",
          scopedSlots: { customRender: "evaluation" },
        },
        {
          title: "评价时间",
          dataIndex: "time",
          key: "time",
          align: "center",
        },
        {
          title: "来源",
          dataIndex: "source",
          key: "source",
          align: "center",
        },
        {
          title: "情绪",
          dataIndex: "emotional",
          key: "emotional",
          align: "center",
        },
      ],
    };
  },
  methods: {
    dataScroll: function () {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
    jump(index) {
      let jump = document.getElementsByClassName("section");
      // 获取需要滚动的距离
      let total = jump[index].offsetTop - 84;
      let distance =
        document.documentElement.scrollTop || document.body.scrollTop;
      let step = total / 10;
      if (total > distance) {
        smoothDown();
      } else {
        let newTotal = distance - total;
        step = newTotal / 10;
        smoothUp();
      }
      function smoothDown() {
        if (distance < total) {
          distance += step;
          document.body.scrollTop = distance;
          document.documentElement.scrollTop = distance;
          setTimeout(smoothDown, 10);
        } else {
          document.body.scrollTop = total;
          document.documentElement.scrollTop = total;
        }
      }
      function smoothUp() {
        if (distance > total) {
          distance -= step;
          document.body.scrollTop = distance;
          document.documentElement.scrollTop = distance;
          setTimeout(smoothUp, 10);
        } else {
          document.body.scrollTop = total;
          document.documentElement.scrollTop = total;
        }
      }
    },
    detailMoreBtn(record, type) {
      if (type === "name") {
        record.isNameShowMore = !record.isNameShowMore;
      } else {
        record.isShowMore = !record.isShowMore;
      }
    },
    loadSroll: function () {
      var self = this;
      var sections = document.getElementsByClassName("section");
      for (var i = sections.length - 1; i >= 0; i--) {
        if (self.scroll >= sections[i].offsetTop - 100) {
          this.current = i;
          break;
        }
      }
    },
  },
  watch: {
    scroll: function () {
      this.loadSroll();
    },
  },
  mounted() {
    window.addEventListener("scroll", this.dataScroll);
  },
};
</script>


<style lang="stylus" scoped>
.news-detail-content {
  width: 1200px;
  margin: 0 auto;
  min-height: 300px;
  display: flex;

  .detail-content {
    width: 1010px;
    min-height: 100%;
    background: #fff;
    padding: 30px 30px 0px 30px;
    padding-bottom: 400px;
    box-sizing: border-box;

    .section {
      padding-bottom: 40px;
      box-sizing: border-box;
    }

    .news-text {
      h3 {
        color: #333;
        font-size: 32px;
        text-align: center;
      }

      .news-message {
        text-align: center;
        font-size: 14px;
        color: #666;
        padding-bottom: 20px;
        border-bottom: 1px solid #ececec;
        margin-bottom: 30px;

        span.source {
          margin-right: 46px;
        }
      }

      .news-detail-word {
        font-size: 18px;
        color: #333;
        line-height: 1.5;
        text-indent: 2em;
      }
    }

    .recognition-content {
      .card-table {
        .ellipsis {
          width: 100%;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .td-detail {
          text-align: left;
          font-size: 16px;
        }

        .more-btrn {
          text-align: center;
          color: #1678fd;
          font-size: 16px;
          margin-top: 10px;
          cursor: pointer;
        }
      }
    }

    .abstract-content {
      p {
        font-size: 16px;
        color: #333;
        line-height: 1.5;
        text-indent: 2em;
      }
    }

    .polymerization-map {
      .polymerization-message {
        padding: 8px;
        font-size: 14px;
        color: #656b90;
        margin-top: -5px;
        background: #f4f5f6;
        margin-bottom: 20px;

        span {
          margin-right: 30px;
        }
      }
    }

    .erchart-content {
      .action-content {
        margin-top: 40px;
      }

      .action-title {
        text-align: center;

        span {
          font-size: 15px;
          color: #333333;
          padding: 10px 20px 10px 30px;
          background-color: #ebf7ff;
          border-radius: 5px;

          i {
            vertical-align: middle;
          }
        }

        big {
          color: #1678fd;
          font-size: 25px;
          margin-left: 5px;
          vertical-align: sub;
        }
      }
    }

    .emotional-table {
      .td-detail {
        text-align: left;
      }

      .more-btrn {
        text-align: center;
        color: #1678fd;
        font-size: 12px;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }

  .content-nav {
    width: 190px;

    a:first-child {
      border: none;
    }

    .nav1 {
      display: block;
      width: 100%;
      height: 45px;
      text-align: center;
      line-height: 45px;
      background: #eaebef;
      color: #666666;
      font-size: 16px;
      border-top: 1px solid #e4e4e4;
    }

    .current {
      background: #fff;
    }
  }

  .card-content {
    box-shadow: 0 0 10px #dfe0e7;
    margin-bottom: 25px;
  }

  .card-title {
    font-size: 16px;
    color: #333;

    i {
      color: #ff7e00;
      margin-left: 10px;
    }

    span {
      position: relative;
      padding: 0 5px;
    }

    span:after {
      content: '';
      width: 100%;
      height: 4px;
      display: inline-block;
      position: absolute;
      background: rgba(253, 214, 152, 0.7);
      bottom: 0px;
      left: 0px;
    }
  }

  .back-top {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: 'tnum';
    position: fixed;
    right: 100px;
    bottom: 50px;
    z-index: 10;
    width: 40px;
    height: 40px;
    cursor: pointer;

    .ant-back-top-content {
      width: 40px;
      height: 40px;
      overflow: hidden;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.45);
      border-radius: 20px;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
  }
}
</style>